<template>
	<view>
		<view class="top-card">
			<view class="f-side top-card-title" @tap="go_navgator">
				<view class="flex car-info"> 
				  <view>川L456456</view>
				  <view>大众</view>
				</view>
				<view class="iconfont icon-you"></view>
			</view>
			<view class="f-side top-card-text"><view>上次到店</view><view>里程数</view></view>
			<view class="f-side top-card-text"><view>2019-11-1</view><view>4000KM</view></view>
		</view>
		<!-- 筛选按钮 -->
		<view class="chose zcAlignI_center flex"> <view class="flex" @tap="do_selectShow"><image src="../../static/choose-2019-11-6.png" mode=""></image><view>筛选</view></view>  </view>
		<!-- 周期列表 -->
			<view class="swiper-box">
				<scroll-view scroll-y class="scroll-view">
					<view class="paddingB100upx">
						<block v-for="(item,index) in 5" :key="index">
							<view class="car-cycle-wrap">
								<cardCycle @addNewCycle='addNewCycle("no",$event)'></cardCycle>
							</view>
						</block>
					</view>
					<view class="bottom-btn">
						<button type="primary" @tap="addNewCycle('yes')">添加周期表</button>
					</view>
				</scroll-view>
			</view>
			<!-- 筛选组件 -->
      <view v-if="cycleSelectShow">
				<cycleSelect @getSelectInfo='getSelectInfo'></cycleSelect>
			</view>
			<!-- 添加列表组件 -->
			<view v-show='cycleAddShow'>
				<cycleAdd @do_addCycleSubmit="do_addCycleSubmit" :isAddNew="isAddNew"></cycleAdd>
			</view>
      
	</view>
</template>

<script>
	let _this;
	import cardCycle from "../../components/home-metting/car-cycle.vue"
	import cycleSelect from "../../components/home-metting/car-cycle-select.vue"
	import cycleAdd from "../../components/home-metting/car-cycle-add.vue"

	export default {
		components:{
			cardCycle,
			cycleSelect,
			cycleAdd
		},
		data() {
			return {
       cycleSelectShow:false,
       cycleAddShow:true,
			 isAddNew:true
			}
		},
		created(){
			_this = this
		},
		methods: {

			do_selectShow(){
				_this.cycleSelectShow = true
			},
			getSelectInfo(item){
				_this.cycleSelectShow = false
				if(item){
					console.log("提交",item)
				}
			},
			go_navgator(){
				uni.navigateTo({
					url: '../home_car_archives/home_car_archives'
				});
			},
			do_addCycleSubmit(){
				_this.cycleAddShow = false
			},
			addNewCycle(item,item2){
				if(item == "no"){
					_this.isAddNew = false
				}else{
				_this.isAddNew = true
				}
				_this.cycleAddShow = true
			}
		}
	}
</script>

<style > 
.top-card{
	margin: 10upx 20upx;
	background: #fff;
	box-shadow: 1upx 1upx 5upx 10upx #F3EFEF;
	padding: 10upx 20upx 20upx 20upx;
}
.top-card-title{
	height: 70upx;
  line-height: 70upx;
	border-bottom: 1upx solid #F9F9F9;
	margin-bottom: 10upx;
}
.car-info>view:nth-of-type(1){
	font-size: 32upx;
	font-weight: 520;
}
.car-info>view:nth-of-type(2){
	margin-left: 20upx;
	height: 32upx;
	line-height: 32upx;
	padding: 0 12upx;
	background-color:#D0E9FD ;
	color:#73BDFC ;
	font-size: 22upx;
	margin-top: 14upx;
	border-radius: 14upx;
}
.icon-you{
	color: #9B9B9B;
	font-size: 20upx;
}
.top-card-text{
	height: 40upx;
	line-height: 40upx;

}
.top-card-text:nth-of-type(2){
	color:#9B9B9B ;
	font-size: 24upx;
}
.chose{
	height: 70upx;
}
.chose image{
	width: 32upx;
	height: 32upx;
	margin-right: 10upx;
	position: relative;
	top:10upx
}
.chose>view{
	margin-left: auto;
	margin-right: 40upx;
	color:#9B9B9B ;
}
	/* 车周期 */
	.car-cycle-wrap:nth-of-type(1) .car-cycle{
		margin-top: 0 !important;
	}
		.car-cycle-wrap:nth-of-type(2n) .car-cycle>.car-cycle-title{
			background-image: linear-gradient(to right, #58B0FF, #68CDF7) !important;
		}
		.car-cycle-wrap:nth-of-type(3n) .car-cycle>.car-cycle-title{
			background-image: linear-gradient(to right, #6E97FF, #F082FB) !important;
		}
.car-cycle-wrap .car-cycle{
	margin: 20upx ;
}
.paddingB100upx{
		padding-bottom: 100upx;
	}
.swiper-box{
	position: absolute;
	top:275upx;
	bottom:0;
	width: 100%;
	padding-top: 10upx ;
	box-sizing: border-box;
	}
	swiper{
	height: auto; 
	}
	.scroll-view{
		height: 100%;
	}
.bottom-btn{
		position: fixed;
		bottom: 0;
		height: 100upx;
		line-height: 100upx;
		width: 100%;
		background-color: #F4F5F6;
	}
	.bottom-btn button{
   height: 100upx;
	 line-height: 100upx;
		background-color: #50ADFD;
		color: #fff;
		border-radius: 10upx;
		margin: 10upx 20upx;
	}
	/* 选择 */
	/* 添加 */
		.card_img>view {
		border: none !important;
	}
		.button-hover{
		background-color:#50ADFD !important;
	}
</style>
